<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../static/bootstrap/css/bootstrap-table.min.css" rel="stylesheet" type="text/css"/>
    <link href="../static/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <link href="../static/plugins/layui/css/layui.css" rel="stylesheet" type="text/css"/>
    <link href="../static/bootstrap/css/bootstrap-editable.css" rel="stylesheet" type="text/css"/>
    <link href="../static/css/3d.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../static/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="../static/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../static/bootstrap/js/bootstrap-table.min.js"></script>
    <script type="text/javascript" src="../static/js/jquery.treegrid.extension.js"></script>
    <script type="text/javascript" src="../static/bootstrap/js/bootstrap-editable.min.js"></script>
    <script type="text/javascript" src="../static/bootstrap/js/bootstrap-table-editable.js"></script>
    <script type="text/javascript" src="../static/bootstrap/js/bootstrap-table-export.js"></script>
    <script type="text/javascript" src="../static/js/tableExport.min.js"></script>
    <script src="../static/plugins/layui/layui.all.js"></script>
    <script type="text/javascript" src="../static/js/fq.js"></script>
    <script type="text/javascript" src="../static/js/fault_list.js"></script>

</head>
<style>
    a {
        text-decoration: none;
        color: #000000;
    }
</style>

<body>


<div id="table" style="width: 80%;margin: 0 auto;">
    <div id="toolbar" style="margin:20px">
        <input type="button" id="expandAllTree" value="展开所有" class="layui-btn layui-btn-sm"/>
        <button type="button" data-toggle="modal" data-target="#addTModal" class="layui-btn
    layui-btn-normal layui-btn-sm "><i class="layui-icon">&#xe608;</i>添加顶事件
        </button>
        <div id="snowFlow"></div>
    </div>
    <table id="tree_table"></table>
    <div><span class="label label-success">T</span>:顶事件,<span class="label label-warning">M</span>:中间事件,<span
            class="label
    label-info">X</span>:底事件，点击虚线进行修改信息
    </div>
</div>


<div class="modal fade" id="addTModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="width: 20%">
        <div class="modal-content">
            <div class="modal-header text-center">
                <h4 class="modal-title" class="text-center">添加顶事件</h4>
            </div>
            <div class="modal-body">
                <form class="form-inline" role="form">
                    <div class="from-group">
                        <label>顶事件:</label>
                        <input type="text" id="Tevents" class="form-control"
                               placeholder="请输入顶事件">
                        <span id="evspan" style="display: none;color: red">输入不能为空</span>
                    </div>
                    <br>
                    <div class=" form-group">
                        <label>描　述:</label>
                        <textarea type="text" id="Tdescribe" class="form-control"
                                  placeholder="请输入描述" style="width: 105%;height: 150px;resize: none"></textarea>
                        <span id="desspan" style="display: none;color: red">输入不能为空</span>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="addTBtn">确认</button>
            </div>
        </div>

    </div>
</div>
<div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="width: 20%">
        <div class="modal-content">
            <div class="modal-header text-center">
                <h4 class="modal-title" class="text-center">删除事件</h4>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning ">
                    <a href="#" class="close" data-dismiss="alert">
                    </a>
                    <strong>警告！</strong>此操作会删除当前事件，也会删除子事件,并且不可撤销操作
                </div>
                <input id="delevent" name="eid" style="display: none">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="deleventBtn">确认</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="addeventModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="width: 20%">
        <div class="modal-content">
            <div class="modal-header text-center">
                <h4 class="modal-title" class="text-center">添加子事件</h4>
                <input id="addeve" style="display: none">
            </div>
            <div class="modal-body">
                <form class="form-inline" role="form">
                    <div class="from-group">
                        <label>事件:</label>
                        <input type="text" id="MXevents" class="form-control"
                               placeholder="请输入事件">
                        <span id="addevspan" style="display: none;color: red">输入不能为空</span>
                    </div>
                    <br>
                    <div class=" form-group">
                        <label>描　述:</label>
                        <textarea type="text" id="adddescribe" class="form-control"
                                  placeholder="请输入描述" style="width: 100%;height: 150px;resize: none"></textarea>
                        <span id="addesspan" style="display: none;color: red">输入不能为空</span>
                    </div>
                    <br>
                    <br>
                    <label class="radio-inline">
                        <input type="radio" name="optionsRadiosinline" value="M" checked>
                        中间事件
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="optionsRadiosinline" value="X"> 底事件
                    </label>
                    <br>
                    <span id="desspan" style="color: red">事件类型不能修改，请注意！！！</span>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="addevenBtn">确认</button>
            </div>
        </div>

    </div>
</div>
</body>
<script>

    window.onload = function () {
        snowFlow();

        function snowFlow(left, height, src) {
            var container = document.createElement('div');
            var pic = document.createElement('img');
            var snowFlow = document.getElementById('snowFlow');
            pic.className = 'pic';
            container.className = 'container';
            snowFlow.appendChild(container);
            container.appendChild(pic);
            container.style.left = left + 'px';
            container.style.height = height + 'px';
            pic.src = '../static/img/snow.png';
            setTimeout(function () {
                snowFlow.removeChild(container);
            }, 5000);
        }

        setInterval(function () {
            var left = Math.random() * window.innerWidth;
            var height = Math.random() * window.innerHeight;
            var src = '../static/img/snow.png';
            snowFlow(left, height, src);
        }, 500)
    }

</script>
</html>